<template>
    <div class="supervisionlist">
        <Tabs :animated="false" v-model="tabId" @on-click="changeComponent">
            <TabPane :label="item.name" v-for="(item,index) of tabs" :key="item.id">
            </TabPane>
        </Tabs>
        <Row>
            <Col :xs="24">
            <div class="margin-up-down">
                <fourLevelLinkage
                    @changeProvince="changeProvince"
                    @changeCity="changeCity"
                    @changeArea="changeArea"
                    @changeHospital="changeHospital"
                    :province="province"
                    :city="city"
                    :area="area"
                    :hospital="hospital"
                ></fourLevelLinkage>
            </div>
            <div class="margin-up-down" v-if="tabId == '0' || tabId == '1'">
                <Select class="w-select" clearable v-model="dictType" style="width:120px;" placeholder="科室">
                    <Option
                        v-for="item in deptmentList"
                        :value="item.dictType"
                        :key="item.dictType"
                        style='text-align:center'
                    >{{item.dictName}}</Option>
                </Select>
            </div>
            <div class="margin-up-down" v-if="tabId == '2'">
                <Select class="w-select" clearable v-model="dictName" style="width:120px;" placeholder="科室">
                    <Option
                        v-for="item in deptmentList"
                        :value="item.deptNickname"
                        :key="item.dictType"
                        style='text-align:center'
                    >{{item.dictName}}</Option>
                </Select>
            </div>
            <div class="margin-up-down" v-if="tabId == '0'">
                <Input
                v-model.trim="Name"
                placeholder="请输入医生姓名"
                style="width: 260px"
                clearable
                />
            </div>
            <div class="margin-up-down" v-if="tabId != '0'">
                <DatePicker type="daterange" v-model="time" placeholder="请选择日期" format="yyyy-MM-dd" separator='至' 
                class="datatime"></DatePicker>
            </div>
            <div class="margin-up-down" v-if="tabId == '4'">
                <Select class="w-select" v-model="feedbackType" style="width:120px;" placeholder="反馈类型" @on-change="changefeedbackType">
                    <Option
                        v-for="item in typeList"
                        :value="item.typeId"
                        :key="item.typeId"
                        style='text-align:center'
                    >{{item.typeName}}</Option>
                </Select>
            </div>
            <div class="margin-up-down">
                <Button type="primary" icon="ios-search" @click="getDoctorData(1)" class="btn"></Button>
                <Button @click="handleReset()" class="btn"> 
                    <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
                </Button>
            </div>
            </Col>
        </Row>
        <!-- 列表 -->                  
        <Table @on-selection-change="selectChange" :loading="tableLoading" border stripe :columns="columns" :data="datas"></Table>    
        <!--分页器-->
        <div class="page">
            <Page :total="residentregisterSize" :current='pageNo' :page-size="pageSize"  show-total show-elevator @on-change="pageChange"/>
        </div>           
    </div>
</template>
<script>
import { Tabs, TabPane, Page, DatePicker } from "view-design";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import api from "@/api/commonApi";
import Utils from "@/utils";
export default {
    components: {
        Tabs,
        TabPane,
        fourLevelLinkage,
        Page,
        DatePicker,
    },
    data(){
        return{
            tabs: [
                { id: 1, name: "医生在线服务统计" },
                { id: 2, name: "门诊服务评价" },
                { id: 3, name: "住院服务评价" },
                { id: 4, name: "满意度调查" },
                { id: 5, name: "患者建议反馈" },
                { id: 6, name: "医生建议反馈" }
            ],
            tabId: 0,
            province: null,
            city: null,
            area: null,
            hospital: null,
            startDate: "",
            endDate: "",
            dictName: '',
            dictType: "",
            deptmentList:[],
            Name: "",
            nickName: "",
            tableLoading: false,
            columns: [],
            datas: [],
            listApi: null,
            doctorService: [
                {title: "排序",key: "iNum",align: "center",width:80,
                    render: (h, params) => {
                        let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iNum);
                    }
                },
                {title: "机构",key: "hospitalName",align: "center",width:230},
                {title: "科室",key: "deptName",align: "center",width:150
                },             
                {title: "医生姓名",key: "doctorName",align: "center",width:130,},
                {title: "平均累积评价",key: "ljpj",align: "center",width:80,},
                {title: "评价率",key: "pjl",align: "center",width:80,},
                {title: "累计评价标签",key: "lable",align: "center"},
            ],
            doctorServiceApi: api.findDoctorServiceQualityPage,            //医生在线服务统计
            evaluation: [
                {title: "排序",key: "sum",align: "center",width:80,
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                {title: "机构",key: "hospitalName",align: "center",width:250},
                {title: "科室",key: "deptName",align: "center",width:150},
                {title: "第一题",key: "questions1",align: "center",width:90,
                 render: (h, params) => {
                    let questions1 = params.row.questions1;
                    switch (questions1) {
                        case 'A':
                            return "非常满意";
                        case 'B':
                            return "满意";
                        case 'C':
                            return "一般";
                        case 'D':
                            return "不满意";
                    }        
                    }
                },
                {title: "第二题",key: "questions2",align: "center",width:90,
                 render: (h, params) => {
                    let questions2 = params.row.questions2;
                    switch (questions2) {
                        case 'A':
                            return "非常满意";
                        case 'B':
                            return "满意";
                        case 'C':
                            return "一般";
                        case 'D':
                            return "不满意";
                    }        
                 }
                },
                {title: "第三题",key: "questions3",align: "center",width:90,
                 render: (h, params) => {
                    let questions3 = params.row.questions3;
                    switch (questions3) {
                        case 'A':
                            return "非常满意";
                        case 'B':
                            return "满意";
                        case 'C':
                            return "一般";
                        case 'D':
                            return "不满意";
                    }        
                    }
                },
                {title: "第四题",key: "questions4",align: "center",width:90,
                 render: (h, params) => {
                    let questions4 = params.row.questions4;
                    switch (questions4) {
                        case 'A':
                            return "非常满意";
                        case 'B':
                            return "满意";
                        case 'C':
                            return "一般";
                        case 'D':
                            return "不满意";
                    }        
                    }
                },
                {title: "第五题",key: "questions5",align: "center",width:90,
                 render: (h, params) => {
                    let questions5 = params.row.questions5;
                    switch (questions5) {
                        case 'A':
                            return "非常满意";
                        case 'B':
                            return "满意";
                        case 'C':
                            return "一般";
                        case 'D':
                            return "不满意";
                    }        
                    }
                },
                {title: "第六题",key: "questions6",align: "center",width:90,
                 render: (h, params) => {
                    let questions6 = params.row.questions6;
                    switch (questions6) {
                        case 'A':
                            return "非常满意";
                        case 'B':
                            return "满意";
                        case 'C':
                            return "一般";
                        case 'D':
                            return "不满意";
                    }        
                    }
                },
                {title: "第七题",key: "questions7",align: "center",width:90,
                 render: (h, params) => {
                    let questions7 = params.row.questions7;
                    switch (questions7) {
                        case 'A':
                            return "非常满意";
                        case 'B':
                            return "满意";
                        case 'C':
                            return "一般";
                        case 'D':
                            return "不满意";
                    }        
                    }
                },
                {title: "第八题",key: "questions8",align: "center",width:90,
                 render: (h, params) => {
                    let questions8 = params.row.questions8;
                    switch (questions8) {
                        case 'A':
                            return "非常满意";
                        case 'B':
                            return "满意";
                        case 'C':
                            return "一般";
                        case 'D':
                            return "不满意";
                    }        
                    }
                },
                {title: "第九题",key: "questions9",align: "center",width:90,
                
                 render: (h, params) => {
                    let questions9 = params.row.questions9;
                    switch (questions9) {
                        case 'A':
                            return "非常满意";
                        case 'B':
                            return "满意";
                        case 'C':
                            return "一般";
                        case 'D':
                            return "不满意";
                    }        
                    }},
                {title: "第十题",key: "questions10",align: "center",width:90,
                 render: (h, params) => {
                    let questions10 = params.row.questions10;
                    switch (questions10) {
                        case 'A':
                            return "非常满意";
                        case 'B':
                            return "满意";
                        case 'C':
                            return "一般";
                        case 'D':
                            return "不满意";
                    }        
                    }
                },
                {title: "评价内容",key: "opinion",align: "center",width:500},
                {title: "评价时间",key: "createTime",align: "center",width:100},
                {title: "评价人",key: "nickName",align: "center",width:120},
            ],
            evaluationApi: api.findHospitalSatisfaction,   //服务评价          
            agree:[
                { title: '排序', key: "sum", type: 'sum', width: 80, align: 'center',
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                { title: '机构' , key: 'hospitalName', align: "center",width:250},

                { title: '建议反馈内容', key: 'content', align: "center"},
                { title: '建议时间', key: 'createTime', align: "center",width:180},
                { title: '建议人', key: 'nickName', align: "center",width:120},
            ],
            agreeType:[
                { title: '排序', key: "sum", type: 'sum', width: 80, align: 'center',
                    render: (h, params) => {
                        let sum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", sum);
                    }
                },
                { title: '机构' , key: 'hospitalName', align: "center",width:250},
                { title: '科室' , key: 'deptName', align: "center",width:150},
                { title: '医生' , key: 'doctorName', align: "center",width:150},
                { title: '建议反馈内容', key: 'content', align: "center"},
                { title: '建议时间', key: 'createTime', align: "center",width:180},
                { title: '建议人', key: 'nickName', align: "center",width:120},
            ],
            doctorFeedbackApi: api.findDoctorWxList,       //医生建议反馈
            patientFeedbackApi: api.findpatientWxList,     //患者建议反馈
            count: 0,
            residentregisterSize: 10,
            pageSize: 10,
            pageNo: 1,
            type: '',
            time: [],
            typeList: [
                {typeName: '建议反馈',typeId: 1,},
                {typeName: '感谢信',typeId: 2,},
            ],
            feedbackType: 1,
        }
    },
    created(){
        this.tabId = this.$route.query.tabId ? this.$route.query.tabId : 0;
        if (this.tabId == 0){
            this.columns = this.doctorService
            this.listApi = this.doctorServiceApi
        } else if(this.tabId == 1){
            this.type = 2
            this.columns = this.evaluation
            this.listApi = this.evaluationApi
        } else if (this.tabId == 2){
            this.type = 3
            this.columns = this.evaluation
            this.listApi = this.evaluationApi
        } else if (this.tabId == 3){
            this.type = 1
            this.columns = this.evaluation
            this.listApi = this.evaluationApi
        }
        else if (this.tabId == 4){
            this.columns = this.agree
            this.listApi = this.patientFeedbackApi
        } 
        else if (this.tabId == 5){
            this.columns = this.agree
            this.listApi = this.doctorFeedbackApi
        } 
    },
    mounted() {
        let pageNo = this.$route.query.pageNo ? parseInt(this.$route.query.pageNo)
            : 1;;
        if (pageNo) {
            this.pageNo = pageNo;
        }
        this.getDoctorData(this.pageNo);
        this.loadingDepartment();
    },
    methods:{
        //选择是否感谢信
        changefeedbackType() {                       
            if(this.feedbackType == 2) {
                this.columns = this.agreeType
            } 
            if(this.feedbackType == 1) {
                this.columns = this.agree
            }
            this.listApi = this.patientFeedbackApi 
            this.getDoctorData(1)
        },
        //头部导航条
        changeComponent(index) {
            // this.handleReset();
            this.tabId = index;
            if (index == 0){
                this.columns = this.doctorService
                this.listApi = this.doctorServiceApi
            } else if(index == 1){
                this.type = 2
                this.columns = this.evaluation
                this.listApi = this.evaluationApi
            } else if (index == 2){
                this.type = 3
                this.columns = this.evaluation
                this.listApi = this.evaluationApi
            } else if (index == 3){
                this.type = 1
                this.columns = this.evaluation
                this.listApi = this.evaluationApi
            }
            else if (index == 4){
                this.columns = this.agree
                this.listApi = this.patientFeedbackApi
            } 
            else if (index == 5){
                this.columns = this.agree
                this.listApi = this.doctorFeedbackApi
            } 
            this.pageNo = 1;
            this.getDoctorData(1);
        },
        changeProvince(val) {
            this.province = val;
        },
        changeCity(val) {
            this.city = val;
        },
        changeArea(val) {
            this.area = val;
        },
        changeHospital(val) {
            this.hospital = val;
            this.dictType = null;
            this.loadingDepartment();
        },
        // 页面查询的科室选择框
        loadingDepartment(){
            let url = api.querydeptname
            let params = {
                hospitalId : this.hospital
            }
            this.packageAxios(this,url,params,(res)=>{
                if(res.data.success) {
                    let ret = res.data.object;
                    this.deptmentList = ret;
                } else {
                    this.deptmentList = []
                    this.$Message.error("加载失败")
                }
            })
        },
        //表格
        selectChange(selections) {
            this.selections = selections;
        },
        // 分页
        pageChange(index) {
            if (this.Name) {
                this.getDoctorData(index, this.Name);
            } else {
                this.getDoctorData(index);
            }
        },
        //重置
        handleReset() {
            this.pageNo = 1;
            this.pageSize = 10;       
            this.province = null;
            this.city = null;
            this.area = null;
            this.Name = "";
            this.hospital = null;
            this.dictName = null;
            this.dictType = null;
            this.time = [];
            this.getDoctorData(this.pageNo);
        },
        // 查询，获取页面数据
        getDoctorData(pageNo) {
            if  (pageNo) {
                this.pageNo = Number(pageNo);
            }
            let params = {
                pageNo: this.pageNo,
                pageSize: this.pageSize
            };
            if (this.Name != "") {
                params.searchKey = this.Name.trim();
            }
            params.provinceCode = this.province ? this.province : null;
            params.cityCode = this.city ? this.city : null;
            params.areaCode = this.area ? this.area : null;
            params.hospitalId = this.hospital ? this.hospital : null;
            params.deptType = this.dictType ? this.dictType : null;
            params.deptName = this.dictName ? this.dictName : null;
            let startDate = '';
            let endDate = '';
            if(this.time[0]){
                startDate = Utils.getNowDateBySpecialFormat(this.time[0]).substring(0,10);
            }
            if(this.time[1]) {
                endDate = Utils.getNowDateBySpecialFormat(this.time[1]).substring(0,10);
            }
            params.minDate = startDate ? startDate : null;
            params.maxDate = endDate ? endDate : null;
            params.fromTime = startDate ? startDate : null;
            params.endTime = endDate ? endDate : null;
            params.type = this.type ? this.type : null;
            params.feedbackType = this.feedbackType ? this.feedbackType : null;
            this.tableLoading = true;
            this.$axios.post(this.listApi, params).then(res => {
            if (res.data.code) {               
                let ret = res.data.object;
                let subject = []
                this.residentregisterSize = ret.total;
                if (ret.records) {                  
                    let dataList = ret.records
                    if(this.tabId == 1 ||this.tabId == 2 || this.tabId == 3){
                        ret.records.forEach((item,index) =>{
                            item.sum = this.addZeros(index)
                            subject.push(item.questions1,item.questions2,item.questions3,item.questions4,item.questions5,item.questions6,item.questions7,item.questions8,item.questions9,item.questions10,) 
                        })
                    }
                    // for (let sum in dataList) {
                    //     dataList[sum].iNum = parseInt(sum) + 1;
                    // }
                    this.datas = dataList;
                    this.datas.forEach(i =>{
                        if(i.nickName){
                            i.nickName = i.nickName
                        } else {
                            i.nickName = i.doctorName
                        }
                    })                      
                } else {
                    this.residentregisterSize = 0;
                    this.datas = [];
                    this.$Message.info("查询结果为空");
                }
            } else {
                this.$Message.info(res.data.message);
            }
                this.tableLoading = false;
            }).catch(() => {
                this.tableLoading = false;
            });
        }
    },
}
</script>
<style lang="less" scoped>
.supervisionlist{
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .margin-up-down {
        display: inline-block;
        margin: 10px 0 ;
    }
    .btn {
        width: 58px;
        height: 32px;
    }
    .list {
      width: 100%;
      margin: 10px 0;
    }
    .page {
        width: 100%;
        margin: 10px auto;
        text-align: center;
    }
    .datatime {
        width: 200px;
        z-index: 99999;
    }
}
</style>